<!doctype html>
<head>
    <title>获取人脸位置</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
<h1>获取人脸坐标位置</h1>
<!--<form method="POST" enctype="multipart/form-data">-->
<!--<input type="file" name="file" id="file">-->
<!--<input type="submit" value="上传">-->
<!--</form>-->
<button id="capture" onclick="draw();">获取</button>
<br>
<video autoplay id="source_vid" style="width:320;height:240px"></video>
<img src="" id="imgsrc">
<br>

<canvas id="output" style="display:none;"></canvas>
<script type="text/javascript" charset="utf-8">

        var video = document.getElementById('source_vid');
        var show = document.getElementById('show_point');
        var file = document.getElementById('file');
        var canvas = document.getElementById('output');
        var context = canvas.getContext('2d');

        function draw(){
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video,0,0, canvas.width, canvas.height);
            // Converts canvas to an image
            var imageDate = canvas.toDataURL("image/jpeg", 0.5);
            var form = new FormData();
            form.append("file_date",imageDate.substr(23));
            var req = new XMLHttpRequest();

            req.onreadystatechange = function(){
                if(req.readyState==4&&req.status==200){
                    // 请求成功
                    // var obj = req.responseText;
                    var blob = this.response;
                    var img = document.getElementById("imgsrc");

                    img.src = blob;
                }
            };
            req.open("post", "point", true);
            req.send(form);
        }

        window.URL = window.URL || window.webkitURL; // 获取到window.URL对象
        var success = function(stream){
            // video.src = window.URL.createObjectURL(stream);
             //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            console.log(stream);

            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
        }

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia;
        navigator.getUserMedia({video:true, audio:false}, success, console.log);

</script>
</body>
